'use strict'

const gulp = require('gulp')
const del = require('del')
const $ = require('gulp-load-plugins')()
const autoprefixer = require('autoprefixer')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload
const conf = {
    dist: './dist',
    src: './src',
    examples: './examples',
    port: 3000
}

$.sass.compiler = require('node-sass')

const prod = process.env.NODE_ENV == 'prop'

// 预处理EJS模版文件
const ejs = function() {
    return gulp.src([conf.src + '/examples/**/*.ejs',
            '!' + conf.src + '/examples/**/_parts/**/*.ejs'
        ])
        .pipe($.plumber())
        .pipe($.if(prod, $.sourcemaps.init()))
        .pipe($.rename({
            extname: '.html'
        }))
        .pipe($.changed(conf.examples))
        .pipe($.ejs())
        .pipe($.if(prod, $.htmlmin({
            collapseWhitespace: true
        })))
        .pipe($.if(prod, $.sourcemaps.write()))
        .pipe(gulp.dest(conf.examples))
        .pipe(reload({stream: true}))
        .pipe($.notify('<%= file.relative %> ejs complete'))
}

// 预处理JS文件
const script = function() {
    return gulp.src([conf.src + '/**/*.js',
            '!' + conf.src + '/scripts/modules/*.js',
            '!' + conf.src + '/scripts/lib/*.js',
            '!' + conf.src + '/scripts/locale/*.js',
        ])
        .pipe($.plumber())
        .pipe($.if(prod, $.sourcemaps.init()))
        .pipe($.changed(conf.dist))
        .pipe($.if(prod, $.uglify()))
        .pipe($.if(prod, $.sourcemaps.write('.')))
        .pipe(gulp.dest(conf.dist))
        .pipe(reload({stream: true}))
        .pipe($.notify('<%= file.relative %> script complete'))
}

// 处理lib文件
const libscript = function() {
    return gulp.src(conf.src + '/scripts/lib/*.js')
        .pipe($.plumber())
        .pipe($.if(prod, $.sourcemaps.init()))
        .pipe($.concat('vendor.js'))
        .pipe($.changed(conf.dist + '/scripts'))
        .pipe($.if(prod, $.sourcemaps.write('.')))
        .pipe(gulp.dest(conf.dist + '/scripts'))
        .pipe(reload({ stream: true }))
        .pipe($.notify('<%= file.relative %> libscript complete'))
}
// 处理hi.js文件
const hiscript = function() {
    return gulp.src([conf.src + '/scripts/modules/*.js', conf.src + '/scripts/locale/*.js'])
        .pipe($.plumber())
        .pipe($.if(prod, $.sourcemaps.init()))
        .pipe($.concat('hi.js'))
        .pipe($.if(prod, $.uglify()))
        .pipe($.changed(conf.dist + '/scripts'))
        .pipe($.if(prod, $.sourcemaps.write('.')))
        .pipe(gulp.dest(conf.dist + '/scripts'))
        .pipe(reload({stream: true}))
        .pipe($.notify('<%= file.relative %> hiscript complete'))
}

// 预处理CSS文件
const scss = function() {
    return gulp.src([conf.src + '/**/*.scss'])
        // 防止错误引起管道中断
        .pipe($.plumber())
        .pipe($.if(prod, $.sourcemaps.init()))
        .pipe($.changed(conf.dist, {
            extension: '.css'
        }))
        .pipe($.sass().on('error', $.sass.logError))
        // 添加css3后缀
        .pipe($.postcss([autoprefixer({
            overrideBrowserslist: ['> 1%', 'last 2 versions', 'ie >= 8'],
            cascade: prod ? false : true
        })]))
        //  压缩css
        .pipe($.if(prod, $.cleanCss({
            compatibility: 'ie8'
        })))
        // 生成 source maps
        .pipe($.if(prod, $.sourcemaps.write()))
        .pipe(gulp.dest(conf.dist))
        .pipe(reload({stream: true}))
        .pipe($.notify('<%= file.relative %> style complete'))
}

// 处理图片
const image = function() {
    return gulp.src(conf.src + '/**/*.@(png|jpg|jpeg|gif|cur)')
        .pipe($.plumber())
        .pipe($.cache($.imagemin({
            progressive: true,
            optimizationLevel: 3
        })))
        .pipe(gulp.dest(conf.dist))
        .pipe(reload({stream: true}))
        .pipe($.notify('<%= file.relative %> image complete'))
}

// 预处理icon字体图标文件
const font = function() {
    return gulp.src(conf.src + '/**/*.@(eot|svg|ttf|woff|woff2)')
        .pipe($.plumber())
        .pipe($.changed(conf.dist))
        .pipe(gulp.dest(conf.dist))
        .pipe(reload({stream: true}))
        .pipe($.notify('<%= file.relative %> font complete'))
}
// 清理dist和examples文件夹
const clean = function() {
    del([conf.dist, conf.examples])
}

// 启动静态资源文件服务器和检测文件改动
const dev = function(done) {
     browserSync.init({
        port: conf.port,
        open: false,
        online: false,
        server: {
            baseDir: [conf.dist, conf.examples],
            directory: true
        }
    })
    done()
}

// 监测文件变动
const watchs = function() {
    $.watch(conf.src + '/**/*.ejs', ejs)
    $.watch(conf.src + '/**/*.js', script)
    $.watch(conf.src + '/**/*.scss', scss)
    $.watch(conf.src + '/**/*.@(png|jpg|jpeg|gif)', image)
    $.watch(conf.src + '/**/*.@(eot|svg|ttf|woff|woff2)', font)
}

// css
gulp.task('scss', scss)
// js
gulp.task('script', script)
// 图片
gulp.task('image', image)
// 字体图标
gulp.task('font', font)
// 将ejs 模块生成html
gulp.task('ejs', ejs)
// 服务
gulp.task('dev', dev)
// 监测文件改动
gulp.task('watchs', watchs)
// clean
gulp.task('clean', clean)

// 初始化
gulp.task('init', gulp.series('clean', gulp.parallel('ejs', 'scss', 'script', 'font', 'image')));

// 生产
gulp.task('build', gulp.series('clean', gulp.parallel('script', 'scss', 'ejs', 'image', 'font')))

// 调试
gulp.task('dev', gulp.series('dev', 'watchs'))